import React, { useState } from "react"
import styles from "./MyPhone.module.scss"
import { useHistory } from "react-router-dom"
import useStore from '../../context/store'
import { useObserver } from "mobx-react-lite"
const MyPhone: React.FC = () => {
    const [phone, setPhone] = useState<string>('')
    const [code, setCode] = useState<string>('')
    let mine = useStore().mine
    let history = useHistory()
    function goBack() {
        history.goBack()
    }
    async function sendCode() {
        if (!(/^1[3456789]d{9}$/.test(phone))) {
            mine.getMyPhone(phone)
        }
    }
    function setMyPhone() {
        mine.setPhone(code)
        history.push('/index/my')
    }
    return useObserver(() => <div className={styles.wrap}>
        <header className='header'>
            <div className={styles.push} onClick={goBack}>
                {'<'}
            </div>
            <div className={styles.text} >
                手机号
            </div>
        </header>
        <div className={styles.phone}>
            <input type="text" placeholder='请输入手机号' value={phone} onChange={e => setPhone(e.target.value)} />
        </div>
        <div className={styles.code}>
            <input type="text" placeholder='请输入验证码' value={code} onChange={e => setCode(e.target.value)} />
            <span onClick={sendCode}>{mine.num !== 60 ? mine.num : '发送验证码'}</span>
        </div>
        <div className={styles.setPhone}>
            <button onClick={setMyPhone} >修改手机号</button>
        </div>
    </div>)
}
export default MyPhone